
<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form :inline="true" :model="filters" label-position="right">
          <el-form-item label="选择机构">
            <el-cascader
              @change="refreshPageRequest(1)"
              v-model="filters.GID"
              :options="organizeMix"
              :props="{
                multiple: false,
                value: 'GID',
                label: 'name',
                children: 'children',
                checkStrictly: true,
                emitPath: false,
              }"
              :show-all-levels="false"
              clearable
            >
            </el-cascader>
          </el-form-item>

          <el-form-item>
            <el-button @click="refreshPageRequest(1)">查询</el-button>
            <el-button
              type="primary"
              @click="handleAdd"
               v-show="hasPerm('commadmin:notices:add')"
              >新增</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 内容区域 -->
      <div slot="content">
        <el-table
          :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="pageResult"
          stripe
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
        >
          <el-table-column
            prop="photo"
            label="封面"
            width="100px"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <img
                :src="getItemPhoto(scope.row.poster)"
                :onerror="$errorImgUrl"
                style="width: 50px; height: 50px"
                v-image-preview
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            align="center"
          ></el-table-column>
          <el-table-column prop="insertTime" label="创建时间" align="center">
            <template slot-scope="scope">
              <span>{{ $format(scope.row.insertTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="create_name"
            label="创建人"
            align="center"
          ></el-table-column>
          <el-table-column prop="updateTime" label="上次更新" align="center">
            <template slot-scope="scope">
              <span>{{ $format(scope.row.updateTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="250"
            :label="$t('action.operation')"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="handleEdit(scope.row)"
                 v-show="hasPerm('commadmin:notices:edit')"
                >编辑
              </el-button>
              <el-button
                type="danger"
                @click="handleDelete(scope.row)"
                 v-show="hasPerm('commadmin:notices:remove')"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 家庭成员弹框  / 编辑 -->
        <el-dialog
          title="家庭成员"
          :visible.sync="dialogTableVisible"
        ></el-dialog>
      </div>

      <!-- 底部区域 -->
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.limit"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
  </div>
</template>

<script>
export default {
  data() {
    return {
      errorImg: 'this.src="' + require('@/assets/imgs/houtai/wutu.png') + '"', //默认图片
      loading: true,
      // 弹框
      dialogTableVisible: false,
      // 默认图片
      imgs: require('@/assets/imgs/houtai/wutu.png'),
      // 家庭成员
      tableData: [],
      // 查询返回
      asideShow: false,
      unitShow: false,
      pageResult: [],
      getCommunity: [],
      filters: {
        CID: ''
      },
      pageRequest: {
        page: 1,
        limit: 10
      },
      columns: [],
      loading: false,
      totalSize: 0,

      exportLoading: false,

      operation: false, // true:新增, false:编辑
      // 新增编辑界面是否显示
      editVisible: false,
      addVisible: false,
      // 新增编辑界面数据
      dataForm: {
        text: '',
        name: '',
        title: ''
      }
    }
  },
  async mounted() {
    this.getCommunityList()
    this.handleQuery()
    this.organizeMix = await this.getOrganizeMix()
  },
  methods: {
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + 'avatar/' + id
      return url
    },
    // 查询列表
    handleQuery(val) {
      let param = {
        page: this.pageRequest.page,
        limit: this.pageRequest.limit,
        where: {
          status: 1
        }
      }
      let params = Object.assign(param, this.filters)
      let paramJson = JSON.stringify(params)
      this.loading = true
      this.$api.wxNotic.list_notice(paramJson).then(res => {
        if (res.code == 0) {
          this.loading = false
          this.pageResult = res.data
          this.totalSize = res.count
        } else {
          this.$message({ message: '操作失败, ' + res.msg, type: 'error' })
        }
      })
    },
    //删除
    handleDelete(row) {
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        let params = Object.assign({}, row)
        params.status = 2
        this.$api.wxNotic.add_notice({ where: params }).then(res => {
          this.editLoading = false
          if (res.code == 0) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })

            this.handleQuery()
          } else {
            this.$message({
              message: '操作失败, ' + res.msg,
              type: 'error'
            })
          }
        })
      })
    },
    //获取小区的列表选择器
    getCommunityList() {
      let params = {}
      params = {
        where: {
          CODES: []
        }
      }
      let param = JSON.stringify(params)
      this.loading = true
      this.$api.three.communityList(params).then(res => {
        if (res.code == 0) {
          this.loading = false
          this.getCommunity = res.data
        } else {
          this.$message({ message: '操作失败, ' + res.msg, type: 'error' })
        }
      })
    },
    // 翻页
    refreshPageRequest(val) {
      this.pageRequest.page = val
      this.handleQuery(this.pageRequest.page, this.pageRequest.pageSize)
    },
    // 新增
    handleAdd() {
      this.$router.push({ path: '/addnotice', query: {} })
    },
    // 编辑
    handleEdit(row) {
      this.$router.push({
        path: '/addnotice',
        query: {
          dataForm: row
        }
      })
    },
    //添加切换到编辑
    changeEdit(row) {},
    handleSave: function() {
      this.editVisible = false
      this.addVisible = false
      this.handleQuery()
    },
    /* 保存成功关闭编辑弹窗 */
    closeEdit: function() {
      this.editVisible = false
    },
    /* 取消编辑 */
    handleCancel: function() {
      this.editVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
